<template>


  <div class="exam-registration">
    <div class="header-section">
      <div class="search-box">
        <input
            type="text"
            v-model="searchKeyword"
            placeholder="请输入监考名称关键词查询"
            class="search-input"
        >
        <button class="search-btn" @click="searchRecords">
          <span>查询</span>
        </button>
      </div>
    </div>

    <div class="records-table">
      <table>
        <thead>
        <tr>
          <th>序号</th>
          <th>监考批次</th>
          <th>科目</th>
          <th>教室号</th>
          <th>报名开始时间</th>
          <th>报名结束时间</th>
          <th>创建时间</th>
          <th>批次状态</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(batch, index) in paginatedBatches" :key="batch.id">
          <td>{{ (currentPage - 1) * pageSize + index + 1 }}</td>
          <td>{{ batch.name }}</td>
          <td>{{ batch.subject }}</td>
          <td>{{ batch.classroom }}</td>
          <td>{{ formatDate(batch.signupStart) }}</td>
          <td>{{ formatDate(batch.signupEnd) }}</td>
          <td>{{ formatDate(batch.createdAt) }}</td>
          <td>
              <span :class="getStatusClass(batch.status)">
                {{ getStatusText(batch.status) }}
              </span>
          </td>
          <td>
            <button
                v-if="batch.status === 'active'"
                class="action-btn signup-btn"
                @click="handleSignup(batch)"
            >
              报名
            </button>
            <button
                class="action-btn view-btn"
                @click="viewDetails(batch)"
            >
              查看报名
            </button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <div class="warning-text">
      <span>注意！！一个批次只能报名一次</span>
    </div>

    <div class="pagination-section">
      <div class="pagination">
        <button
            v-for="page in totalPages"
            :key="page"
            :class="['page-btn', { active: page === currentPage }]"
            @click="currentPage = page"
        >
          {{ page }}
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

import { useRouter } from 'vue-router';
const router = useRouter();

// 监考批次数据结构
interface ExamBatch {
  id: number;
  name: string;
  subject: string;
  classroom: string;
  signupStart: string;
  signupEnd: string;
  createdAt: string;
  status: 'active' | 'upcoming' | 'ended' | 'full';
}

// 搜索关键词
const searchKeyword = ref('');

// 分页相关变量
const currentPage = ref(1);
const pageSize = 10;
const totalBatches = ref(0);

// 模拟监考批次数据
const examBatches = ref<ExamBatch[]>([
  { id: 1, name: '2023年6月期末考试', subject: '高等数学', classroom: '一教301',
    signupStart: '2023-05-01', signupEnd: '2023-05-15', createdAt: '2023-04-20', status: 'ended' },
  { id: 2, name: '2023年6月期末考试', subject: '英语', classroom: '二教105',
    signupStart: '2023-05-01', signupEnd: '2023-05-15', createdAt: '2023-04-20', status: 'ended' },
  { id: 3, name: '2023年9月补考', subject: '数据结构', classroom: '计算机楼203',
    signupStart: '2023-08-10', signupEnd: '2023-08-25', createdAt: '2023-07-15', status: 'upcoming' },
  { id: 4, name: '2023年9月补考', subject: '计算机网络', classroom: '实验楼401',
    signupStart: '2023-08-10', signupEnd: '2023-08-25', createdAt: '2023-07-15', status: 'upcoming' },
  { id: 5, name: '2023年12月四六级考试', subject: '英语四级', classroom: '三教201',
    signupStart: '2023-11-01', signupEnd: '2023-11-20', createdAt: '2023-10-15', status: 'active' },
  { id: 6, name: '2023年12月四六级考试', subject: '英语六级', classroom: '三教202',
    signupStart: '2023-11-01', signupEnd: '2023-11-20', createdAt: '2023-10-15', status: 'active' },
  { id: 7, name: '2024年1月期末考试', subject: '高等数学', classroom: '一教302',
    signupStart: '2023-12-01', signupEnd: '2023-12-15', createdAt: '2023-11-20', status: 'active' },
  { id: 8, name: '2024年1月期末考试', subject: '线性代数', classroom: '一教303',
    signupStart: '2023-12-01', signupEnd: '2023-12-15', createdAt: '2023-11-20', status: 'full' },
]);

// 过滤后的批次
const filteredBatches = computed(() => {
  if (!searchKeyword.value) return examBatches.value;

  const keyword = searchKeyword.value.toLowerCase();
  return examBatches.value.filter(batch =>
      batch.name.toLowerCase().includes(keyword) ||
      batch.subject.toLowerCase().includes(keyword)
  );
});

// 分页相关计算
const totalPages = computed(() => {
  return Math.ceil(filteredBatches.value.length / pageSize);
});

const paginatedBatches = computed(() => {
  const start = (currentPage.value - 1) * pageSize;
  const end = start + pageSize;
  return filteredBatches.value.slice(start, end);
});

// 状态处理函数
const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    'active': '进行中',
    'upcoming': '未开始',
    'ended': '已结束',
    'full': '已报满'
  };
  return statusMap[status] || status;
};

const getStatusClass = (status: string) => {
  const classMap: Record<string, string> = {
    'active': 'status-active',
    'upcoming': 'status-upcoming',
    'ended': 'status-ended',
    'full': 'status-full'
  };
  return classMap[status] || '';
};

// 日期格式化
const formatDate = (dateString: string) => {
  const date = new Date(dateString);
  return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
};



// 操作处理函数
const handleSignup = (batch: ExamBatch) => {
  // 跳转到报名页面
  router.push({
    name: 'ExamSignup',
    params: { id: batch.id }
  });
};



// 查看报名详情
const viewDetails = (batch: ExamBatch) => {
  router.push({
    name: 'ExamBatchDetail',
    params: { id: batch.id }
  });
};

const searchRecords = () => {
  currentPage.value = 1; // 搜索后重置到第一页
};
</script>

<style scoped>
.exam-registration {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 25px;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.search-box {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
}

.search-input {
  flex: 1;
  padding: 10px 15px;
  border: 1px solid #dcdfe6;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
  height: 40px;
  border-right: none;
}

.search-btn {
  background-color: #1a3a6c;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  padding: 0 20px;
  height: 40px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background-color: #2c5282;
}

.records-table {
  margin-bottom: 20px;
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

th {
  background-color: #f8fafc;
  color: #1a2b4b;
  font-weight: 600;
}

tr:hover {
  background-color: #f8fafc;
}

.status-active {
  color: #2e7d32;
  font-weight: 500;
}

.status-upcoming {
  color: #f57f17;
  font-weight: 500;
}

.status-ended {
  color: #666;
  font-weight: 500;
}

.status-full {
  color: #c62828;
  font-weight: 500;
}

.action-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.3s;
  margin-right: 5px;
}

.signup-btn {
  background-color: #1a3a6c;
  color: white;
}

.signup-btn:hover {
  background-color: #2c5282;
}

.view-btn {
  background-color: transparent;
  border: 1px solid #1a3a6c;
  color: #1a3a6c;
}

.view-btn:hover {
  background-color: #1a3a6c;
  color: white;
}

.warning-text {
  margin-top: 15px;
  color: #c62828;
  font-size: 14px;
  font-weight: 500;
}

.pagination-section {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.pagination {
  display: flex;
  gap: 5px;
}

.page-btn {
  padding: 6px 12px;
  background-color: white;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s;
}

.page-btn:hover {
  background-color: #f0f2f5;
}

.page-btn.active {
  background-color: #1a3a6c;
  color: white;
  border-color: #1a3a6c;
}
</style>